<template>
  <view class="targetStyle">
    <!-- 指标记录 -->
    <familyInner @changePerson="changePerson" @getFamilyList="getFamilyList"></familyInner>

    <div class="t-head">
      健康档案实时记录您的体征状况、生活方式、诊治用药等信息，以及风险评估结果、健康指导执行情况、健康任务完成情况，以及在此期间您与健康管家的互动信息，从而形成动态的、连续性的量化数据，使健康状况有数可查有据可依，一目了然。
    </div>
    <div v-if="comRecordObj.length" class="t-box">
      <div class="t-box-line"></div>
      <div v-for="(item, index) in comRecordObj" :key="index" class="t-b-item" @click="lookDetail(item)">
        <div class="t-b-dot"></div>
        <div class="t-b-row t-b-row1">
          <div class="t-b-date">{{ item.createDate | dateFilter }}</div>
          <div class="t-b-btn">查看详情</div>
        </div>
        <div class="t-b-row">
          <div class="t-b-date">{{ item.name | filterName }}</div>
        </div>
        <div class="t-b-row t-b-row2">
          <div class="t-b-source">
            <img :src="sourcePng" alt="" />
            <span>{{ item.sourceLabel || '数据来源' }}</span>
          </div>
          <div class="t-c-time">
            <img :src="timePng" alt="" />
            <span>{{ item.createDate }}</span>
          </div>
        </div>
      </div>
    </div>
    <view v-else class="zwda"></view>
  </view>
</template>

<script>
import { getPhysicalExamination, getFamilyPhysicalExamination } from '@/api/healthy';
import { tongji } from '@/utils/tools';
import sourcePng from '@/static/icon/source.png';
import timePng from '@/static/icon/time.png';
import { familyInner } from '@/components/familyInner';
export default {
  components: {
    familyInner
  },
  filters: {
    dateFilter: function (value) {
      if (!value) return '';
      value = value.split(' ')[0];
      value = value.replace(/(.+?)\-(.+?)\-(.+)/, '$1年$2月$3日档案');
      return value;
    },
    filterName: function (value) {
      return value ? value + '的档案' : '';
    }
  },
  data() {
    return {
      patientId: '',
      relation: 1,
      recordObj: {},
      comRecordObj: {},
      sourcePng,
      timePng,
      meList: [],
      familyList: [],
      familyIndex: 0
    };
  },

  computed: {
    // 计算体型
  },

  onLoad: function (option) {
    console.log('option:', option);
    if (option && option.patientId) {
      this.patientId = option.patientId;
      this.relation = option.relation;
    } else {
      if (process.env.NODE_ENV !== 'production') {
        this.patientId = '6ca645c38fe0478bb384995b0c6347e2';
        this.relation = '1';
      }
    }
    this.getData();
  },

  methods: {
    getFamilyList(familyList) {
      this.familyList = familyList;
      let patientIdStr = familyList
        .slice(1)
        .map((item) => {
          return item.insuredId;
        })
        .join(',');

      this.getFamilyData(patientIdStr);
    },

    changePerson(index, relation, insuredId) {
      console.log('index:', index);
      this.familyIndex = index;
      this.ajaxDone = false;
      if (index === 0) {
        this.comRecordObj = this.meList;
      } else {
        this.getData(insuredId);
      }
    },
    async getFamilyData(patientIdStr) {
      // console.log('patientIdStr:', patientIdStr);
      const { data: _record } = await getFamilyPhysicalExamination(patientIdStr);
      this.comRecordObj = _record || [];
      this.meList = _record || [];
    },
    async getData(insuredId) {
      const { data: _record } = await getPhysicalExamination(insuredId);
      this.comRecordObj = _record || [];
    },
    lookDetail({ id, name }) {
      let targetPerson = {};
      if (this.familyIndex === 0) {
        targetPerson = this.familyList.find((member) => {
          return member.memberName === name;
        });
      } else {
        targetPerson = this.familyList[this.familyIndex];
      }
      this.$wxPromise.navigateTo({
        url: `/pagesB/healthyRecord/index?patientId=${targetPerson.memberId}&id=${id}&relation=${targetPerson.relation}`
      });
      tongji('88b07fdf-5c94-41f8-a366-8d468c27bbd4');
    }
  }
};
</script>

<style lang="scss" scope>
.targetStyle {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .t-head {
    width: 700rpx;
    background: #ffffff;
    box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.08);
    opacity: 1;
    border-radius: 16rpx;
    padding: 32rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    margin: auto;
    margin-top: 32rpx;
  }
  .t-box {
    width: 700rpx;
    margin: auto;
    margin-top: 24rpx;
    position: relative;
    .t-box-line {
      width: 0px;
      height: 100%;
      border-left: 1px solid #e8e8e8;
      position: absolute;
      left: 13rpx;
      top: 0rpx;
    }
    .t-b-item {
      width: 654rpx;
      margin: auto;
      margin-bottom: 24rpx;
      background: #ffffff;
      box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.08);
      border-radius: 8rpx;
      box-sizing: border-box;
      padding: 28rpx 10rpx;
      position: relative;
      transform: translateX(23rpx);

      .t-b-dot {
        width: 24rpx;
        height: 24rpx;
        background: #ffffff;
        border: 2rpx solid #f34e1c;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -46rpx;
        &::after {
          content: '';
          width: 16rpx;
          height: 16rpx;
          background: #f34e1c;
          border-radius: 50%;
          opacity: 1;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .t-b-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        &.t-b-row1 {
          justify-content: space-between;
          margin-bottom: 0rpx;
        }
        &.t-b-row2 {
          margin-bottom: 10rpx;
        }
        .t-b-date {
          font-size: 36rpx;
          line-height: 64rpx;
          color: rgba(0, 0, 0, 0.9);
        }
        .t-b-btn {
          width: 160rpx;
          height: 48rpx;
          background: #ffffff;
          border: 2rpx solid #f34e1c;
          opacity: 1;
          border-radius: 24rpx;
          color: #f34e1c;
          line-height: 48rpx;
          text-align: center;
          padding: 0px 12rpx;
        }
        .t-b-source,
        .t-c-time {
          color: #999;
          font-size: 24rpx;
          display: flex;
          align-items: center;

          img {
            width: 24rpx;
            height: 24rpx;
            margin-right: 12rpx;
          }
        }
        .t-c-time {
          // margin-left: 56rpx;
        }
      }
    }
  }

  .rowBox {
    margin: 24rpx;
    background-color: #fff;
    padding: 24rpx;
    border-radius: 16rpx;
    .title {
      position: relative;
      font-size: 38rpx;
      padding-left: 60rpx;
      .titleIcon {
        position: absolute;
        left: 0;
        top: 0;
        img {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
    .content {
      color: rgba(0, 0, 0, 0.6);
      font-size: 32rpx;
      padding: 8rpx 0 0 60rpx;
      .hisList {
        margin: 14rpx 0;
        .way {
          font-size: 24rpx;
          color: rgba(0, 0, 0, 0.4);
        }
      }
    }
  }
  .no-data {
    color: #999;
    text-align: center;
    padding: 50rpx;
  }
}
.stepLine {
  background-color: #fff1f1;
  border-radius: 8rpx;
  position: relative;
  padding: 20rpx 0;
  // padding-left: 40rpx;
  .list {
    padding: 16rpx;
    padding-left: 60rpx;
    position: relative;
    font-size: 32rpx;
    .radioIcon {
      position: absolute;
      left: 22rpx;
      top: 30rpx;
      content: '';
      display: inline-block;
      width: 14rpx;
      height: 14rpx;
      border-radius: 14rpx;
      background-color: #fff;
      z-index: 2;
      border: 2rpx solid #f34e1c;
    }
    .time {
      color: rgba(0, 0, 0, 0.6);
      padding-right: 10rpx;
    }
    .lookDetail {
      color: rgba(38, 128, 235, 1);
    }
  }
  .last {
    .radioIcon {
      background: #f34e1c;
    }
  }
  .topClearLine {
    position: absolute;
    top: 0rpx;
    left: 0;
    width: 50rpx;
    height: 50rpx;
    background: #fff1f1;
    z-index: 1;
  }
  .bottomClearLine {
    position: absolute;
    bottom: 0rpx;
    left: 0;
    width: 50rpx;
    height: 60rpx;
    background: #fff1f1;
    z-index: 1;
  }
}
.stepLine:before {
  content: '';
  position: absolute;
  left: 28rpx;
  top: 0;
  width: 2rpx;
  height: 100%;
  border-right: 2rpx solid #f34e1c;
}
</style>
